<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/border.css"/>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style type="text/css">
        .wrapper {
            margin-top: 400px;
            padding: 20px;
        }

        .textedit {
            font-size: 22px;
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: #cccccc solid 1px;
            margin-bottom: 10px;
            margin-top: 10px;
            color: #333333;
        }

        .textedit-big {
            font-size: 22px;
            width: 100%;
            height: 500px;
            line-height: 40px;
            text-align: left;
            border: #cccccc solid 1px;
            margin-bottom: 10px;
            margin-top: 10px;
            padding: 10px;
            color: #333333;
        }

        .btn-normal {
            font-size: 20px;
            display: block;
            height: 100px;
            width: 100%;
            line-height: 100px;
            background-color: #25a4bb;
            color: #f6f4f9;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn-normal:hover {
            background-color: #207b91;
        }

        .file {
            position: relative;
            display: block;
            border-radius: 4px;
            background-color: #25a4bb;
            color: #f6f4f9;
            text-decoration: none;
            font-size: 20px;
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            height: 100%;
            opacity: 0;
        }

        .file:hover {
            background-color: #207b91;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="wrapper">
        <div>
            <label>
                <input class="textedit" type="text" spellcheck="false" v-model="text" ref="textEdit">
            </label>
        </div>
        <button class="btn-normal" @click="handleSendBtn" ref="sendBtn">SEND</button>
        <button class="btn-normal" @click="handleClearBtn">CLEAR</button>
        <a href="javascript:" class="file">UPLOAD
            <input type="file" @change="handleFileChange" ref="inputer">
        </a>
        <div>
            <label>
                <textarea class="textedit-big" spellcheck="false" v-model="msg" ref="textEdit"></textarea>
            </label>
        </div>
    </div>
</div>

<script type="application/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg: '',
                text: '',
                wssocket: null,
            }
        },
        methods: {
            handleSendBtn(e) {
                this.sendTextByWs(this.text);
                this.text = '';
            },
            handleClearBtn(e) {
                this.text = '';
                this.msg = '';
                this.$refs.textEdit.focus()
            },
            handleFileChange(e) {
                let inputDOM = this.$refs.inputer;
                let file = inputDOM.files[0];
                let data = new FormData();
                data.append('file', file);
                axios({
                    method: 'post',
                    url: window.location.protocol + '//' + window.location.host + '/upload',
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: (e) => {
                        if (e.lengthComputable) {
                            const rate = e.loaded / e.total;  //已上传的比例
                            const rateStr = (rate * 100).toFixed(2) + '%';
                            this.msg += ('上传进度: ' + rateStr + "\n")
                        }
                    },
                    data: data,
                }).then((resp) => {
                    this.msg += (resp.data + "\n")
                })
            },
            sendTextByWs(text) {
                this.wssocket.send(text)
            },
            sendTextByHttp(text) {
                axios({
                    method: 'post',
                    url: window.location.protocol + '//' + window.location.host + '/do',
                    data: text
                }).then((resp) => {
                    console.log(resp.data)
                })
            },
            initWebsocket() {
                let self = this;
                let socket = new WebSocket("ws://" + document.location.host + "/ws");
                this.wssocket = socket;
                socket.onopen = () => {
                    console.log("webSocket open");
                };
                socket.onclose = () => {
                    console.log("webSocket close");
                };
                socket.onmessage = (event) => {
                    console.log(event.data);
                    self.msg += (event.data + "\n")
                }
            }
        },
        mounted() {
            this.$refs.textEdit.focus();
            this.initWebsocket();
        }
    });

</script>
</body>
</html>